<template>
  <div class="mall">
    <div class="header-search">
      <van-search placeholder="搜索店内商品" v-model="value" />
    </div>
    <div class="mall-info" v-if="mall">
      <div class="title">
        <img :src="mall.logo">
        <span>{{mall.mall_name}}</span>
      </div>
      <div class="info">{{mall.sales_tip}}</div>
      <div class="control">
        <span class="item">
          <van-icon name="chat" style="margin-right:0.1rem" />
          <span style="padding-right: 0.2rem; border-right: 1px solid #ededed">客服</span>
        </span>
        <span class="item">
          <van-icon name="like-o" style="margin-right:0.1rem;margin-left:0.2rem" />
          <span>收藏</span>
        </span>
      </div>
    </div>
    <div class="mall-goods">
      <div class="title">
        <i class="iconfont icon-jingxuanchanpin"></i>
        <span>全部商品</span>
      </div>
      <div class="sort-tab">
        <span>默认</span>
        <span>新品</span>
        <span>销量</span>
        <span>价格</span>
      </div>
      <product-list :goodsList="goodsList"></product-list>
    </div>

  </div>
</template>

<script>
import { mallInfo } from "../../api/getDatas";
import ProductList from "../../components/ProductList/productList";
import axios from "axios";
export default {
  components: {
    ProductList
  },
  data() {
    return {
      mallId: "",
      value: "",
      mall: null,
      goodsList: null
    };
  },
  methods: {
    initData() {
      mallInfo(this.mallId).then(res => {
        this.mall = res.data;
      });
      axios.get("/json/mallGoodsList").then(res => {
        this.goodsList = res.data.data.goods_list;
      });
    }
  },
  created() {
    this.mallId = this.$route.query.mall_id;
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.mall-info {
  background-color: white;
  .title {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0.05rem 0;
    img {
      border-radius: 0.04rem;
      width: 0.26rem;
      height: 0.26rem;
      border: 1px solid #ededed;
    }
    span {
      margin-left: 0.08rem;
      font-size: 0.17rem;
    }
  }
  .info {
    text-align: center;
    color: #9c9c9e;
    font-size: 0.12rem;
  }
  .control {
    display: flex;
    height: 0.3rem;
    justify-content: center;
    font-size: 0.15rem;
    margin-top: 0.05rem;
    .item {
      //   display: inline-block;
      display: flex;
      height: 100%;
      align-items: center;
      //   padding: 0 0.2rem;
    }
  }
}
.mall-goods {
  margin-top: 0.08rem;
  .title {
    height: 0.34rem;
    background-color: white;
    color: #e02e24;
    font-size: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      margin-right: 0.08rem;
      font-size: 0.2rem;
    }
  }
  .sort-tab {
    height: 0.4rem;
    display: flex;
    background-color: white;
    span {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #9c9c9c;
      font-size: 0.14rem;
    }
  }
}
</style>

